<template>
  <div>
    <el-form :model="form">
      <item v-for="(item,index) in forms" :key="index" :data="item" :type="item.type" />
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script name="forms" setup>
import {reactive} from 'vue'
import Item from '@/views/form/item'

const forms = [
  {
    type: 'input',
    label: '名称',
    field: '123',
    placeholder: '请输入'
  },
  {
    type: 'select',
    label: '性别',
    field: '1',
    placeholder: '请选择',
    option: [
      {label: '男', value: '1'},
      {label: '女', value: '2'},
      {label: '未知', value: '0'}
    ]
  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const onSubmit = () => {
  console.log('submit!')
}

</script>
<style lang="scss" scoped>
::v-deep .el-date-editor {
  --el-date-editor-width: 100%;
}

::v-deep .el-input__wrapper {
  width: 100%;
}
</style>
